<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="UTF-8">
    <title>码交流 - 我的博客</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.preview.css}">
    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/blog.js}"></script>
    <script th:src="@{/js/moment.js}"></script>
    <script th:src="@{/js/lib/marked.min.js}"></script>
    <script th:src="@{/js/editormd.min.js}"></script>
    <script th:src="@{/js/lib/prettify.min.js}"></script>
</head>
<body>
<div th:insert="~{navigation :: header}"></div>
<div class="container-fluid main profile">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12" style="">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="">
                <h3 class="question_title"><span th:text="${blog.title}"></span></h3>
                <span class="text">作者：</span><span class="text" th:text="${blog.user.name}"></span> |
                <span class="text">阅读数：</span><span class="text" th:text="${blog.viewCount}"></span> |
                <span class="text">发布时间：</span><span class="text" th:text="${#dates.format(blog.gmtCreate,'yyyy年MM月dd日')}"></span>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"  id="blog-view" >
                    <textarea th:text="${blog.content}" style="display: none"></textarea>
                </div>
                <script type="text/javascript">
                    $(function() {
                         editormd.markdownToHTML("blog-view", {

                        });
                    });
                </script>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            </div>
           <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="">
                <span class="label label-info" th:each="tag :${blog.tag.split(',')}">
                        <span class="glyphicon glyphicon-tags"></span>
                         <span class="label label-info question_tag" th:text="${tag}"></span>
                    </span>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="">
                <a th:href="@{'/publishBlog/edit/'+ ${blog.id}}" class="community_menue" th:if="${session.user != null && blog.writer == session.user.id}">
                    <span class="glyphicon glyphicon-pencil edit_question" aria-hidden="true">编辑</span>
                    <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                </a>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                    <h4>
                        <span th:text="${blog.commentCount}"></span>个回复
                    </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment_sp" >
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 coments" th:each="comment :${comments}">
                    <div class="media" >
                        <div class="media-left">
                            <a href="#">
                                <img class="img-circle"
                                     th:src="${comment.user.avatarUrl}">
                            </a>
                        </div>
                        <div class="media-body" >
                            <h4 class="media-heading description" th:text="${comment.user.name}"></h4>
                            <div th:text="${comment.content}">

                            </div>
                            <div class="menus">
                                <span class="glyphicon glyphicon-thumbs-up ico" aria-hidden="true"></span>
                                <span th:data-id="${comment.id}" onclick="againComment(this)">
                                    <span class="glyphicon glyphicon-comment ico" aria-hidden="true" ></span>
                                    <span th:text="${comment.commentCount}" ></span>
                                </span>

                                <span class="pull-right" th:text="${#dates.format(comment.gmtCreate,'yyyy年MM月dd日')}"></span>
                            </div>
                            <!--二级评论-->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse  sub-comments" th:id="${'coment-' +comment.id }"  >
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 coments"  th:id="${'show-'+comment.id}">
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input type="text" class="form-control" placeholder="评论下下~" th:id="${'input-' +comment.id }">
                                    <button type="button" id="button-comment" class="btn btn-success pull-right" onclick="comment(this)" th:data-id="${comment.parentId}" th:dataId="${comment.id}">评论</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                <h4>
                    提交回复
                </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment_sp" >
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="media" >
                        <div class="media-left">
                            <a href="#">
                                <img class="img-circle"
                                     th:src="${session.user != null ? session.user.avatarUrl : '/images/default-avator.png'}">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading description" th:text="${session.user != null ? session.user.name : '匿名用户'}"></h4>
                        </div>
                    </div>
                    <input type="hidden" id="blog_id" th:value="${blog.id}">
                    <textarea class="form-control comment"  rows="6" id="comment_content"></textarea>
                    <button id="btn" type="button" class="btn btn-success btn-comment" onclick="postThis()">回复</button>
                </div>
            </div>


        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>发起人</h4>
                <div class="media" >
                    <div class="media-left">
                        <a href="#">
                            <img class="img-circle"
                                 th:src="${blog.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading description" th:text="${blog.user.name}"></h4>
                    </div>
                </div>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div th:insert="~{side :: side}"></div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>相关博客</h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr_top">
                <ul class="question-rated">
                    <li  th:each="related :${relatedBlog}">
                        <a th:href="@{'/blog/'+ ${related.id}}" th:text="${related.title}">

                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div th:insert="~{footer :: foot}"></div>
</body>
</html>